<template>
	<view class="">
		<u-navbar title="选择售后类型">
		</u-navbar>
		<view class="goodsInfo">
			<view class="tip c3 fs24 fwb ">
				本次售后服务将由<text class="app-theme">宅美批发商城</text>为您提供
			</view>
			<view class="df aic">
				<u-image border-radius="10" :src="goodsInfo.image" width="120" height="120"></u-image>
				<view class="ml30" style="width: 500rpx">
					<view class="df jcsb"><text class="fs26 fwb">{{goodsInfo.goodsName}}</text>
					</view>
					<view class="df jcsb mt20">
						<view class="goodsLabel">{{goodsInfo.specName}}</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 类型 -->
		<view class="df aic jcsb  m030">
			<view class="pr ">
				<view class="df aic jcsb ">
					<view class="tac pr mr40 " v-for="(item,index) in tagList" :key="index" @click="changeType(index)">
						<view class="c3 fs30 textFamily pr" style="z-index: -1;"
							:class="index == classIndex ? 'c48A147' : ''">
							{{item}}
						</view>
					</view>
				</view>
				<image :class="classIndex == 0 ? 'leftOne'  : 'leftTwo'" class="productActive"
					src="@/static/index/xiaolianxuanzhong.png" style="width: 36rpx;height: 12rpx;" mode=""></image>
			</view>
			<view class="df aic pr kefu"><nmr-icon name="kefufill" color="white" size="26"></nmr-icon><text
					class="fs26 ml10" style="color: white;">客服</text><button class="contact"
					open-type="contact"></button></view>
		</view>
		<view class="m030 bgcf p24 bdr20 ">

			<view class="df jcsb aic fs24 border-bottom p20-0" style="padding-top: 0;">
				<view class="c3 fs26 fwb df aic "><nmr-icon name="bohuiyuanyinguanli" color="#FF4500"
						class="mr18"></nmr-icon>售后原因</view>
				<view class="c9 df aic" @click="showreason = true">{{form.afterReason||'请选择售后原因'}} <u-icon
						name="arrow-right" size="26" color="#666666" class="ml8"></u-icon> </view>
			</view>
			<view class="df jcsb aic fs24 border-bottom ">
				<view class="c3 fs26 fwb df aic "><nmr-icon name="zhongliang" color="#4BB3F4"
						class="mr18"></nmr-icon>售后重量</view>
				<view class="c9 df aic">
					<u-input input-align="right" :disabled="classIndex==1" :custom-style="{'font-size':'24rpx'}"
						:clearable="false" placeholder-style="color:#999;font-size:24rpx" placeholder="请输入售后重量"
						v-model="form.changeSaleNum" @blur="blur" type="digit" />
					<view class="c3 fs24 fwb ml10" style="line-height: 70rpx;"> {{goodsInfo.saleUnit||''}}</view>
				</view>
			</view>
			<view class="df jcsb aic fs24  p20-0 border-bottom">
				<view class="c3 fs26 fwb df aic "><nmr-icon name="jine-2" color="#EF2929" class="mr18"></nmr-icon>售后金额
				</view>
				<view class="c9 df aic price"><text class="fs24">￥</text>{{changePlatformMoney||'0.00'}} </view>
			</view>
			<view class="df jcsb  fs24 mt20" style="    align-items: flex-start;">
				<view class="c3 fs26 fwb df aic "><nmr-icon name="type" color="#48A147" class="mr18"></nmr-icon>售后备注
				</view>
				<view class="c9 df aic">
					<view class="remark-box">
						<u-input maxlength="100" v-if="!showreason" :custom-style="{'font-size':'24rpx'}"
							:clearable="false" placeholder-style="color:#999;font-size:24rpx" placeholder="请输入备注"
							v-model="form.remark" type="textarea" />
						<view class="mt10" v-else>
							{{form.remark||'请输入备注'}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="m030 bgcf p24 bdr20 " style="margin-top: 30rpx;">
			<view class="mb20">
				<nmr-icon name="pingzhengguanli" color="#48A147" class="mr18"></nmr-icon>
				<text class="fs28 fwb c3">售后凭证</text>
				<text class="fs24 c9">(可上传视频/图片)</text>

			</view>
			<VideoAssembly ref="VideoAssembly" :videoSrc="videoUrl" @uploadVideo="uploadVideo" class="mt30" :num="3 ">
			</VideoAssembly>
			<u-upload width="190" height="190" :limitType="limitType " max-count="9" ref="uUpload" :action="uploadUrl"
				:file-list="fileList" :custom-btn="true">
				<view slot="addBtn" class="slot-btn df aic jcc" hover-stay-time="150">
					<nmr-icon name="zhaopian" color="#48A147" size="36"></nmr-icon>
					上传图片凭证
				</view>
			</u-upload>
		</view>
		<view class="" style="height: 150rpx;width: 100%;">

		</view>
		<view class="footer df jcc">
			<u-button hair-line @click="handleSubmit" :loading="loading"
				:custom-style="{fontSize: '30rpx', color: '#ffffff',width: '690rpx', height: '88rpx',background: 'linear-gradient(90deg, #48A147 0%, #8AE38A 100%)'}"
				shape='circle' ripple>提交售后申请</u-button>
			<!-- 选择员工 -->
			<u-select z-index="99999" @confirm="confirmReason" v-model="showreason" title="请选择售后原因"
				confirm-color="#48A147" :list="list"></u-select>
		</view>
	</view>
</template>

<script>
	import VideoAssembly from '@/components/releaseDynamics.vue'
	import {
		datatype
	} from '@/api/common.js'
	import Decimal from "decimal.js";
	import {
		refundAdd
	} from '@/api/order.js'
	export default {
		components: {
			VideoAssembly
		},
		data() {
			return {
				goodsInfo: {},
				tagList: ['部分售后', '全部售后'],
				classIndex: 0,
				uploadUrl: this.APPUPLOAD,
				fileList: [],
				limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif', 'mp3', 'mp4'],
				showreason: false,
				list: [],
				form: {
					shopPurOrderId: '',
					afterReason: '',
					afterType: "",
					afterImage: '', //
					changeSaleNum: '',
					changePlatformMoney: '',
					shopId: '',
					remark: ''
				},
				loading: false,
				videoUrl: []
			}
		},
		computed: {
			changePlatformMoney() {
				let num = new Decimal(this.form.changeSaleNum || 0)
				let price = new Decimal(this.goodsInfo.platformPrice || 0)
				return num.mul(price).toFixed(2)
			},

		},
		methods: {
			blur(e) {
				let _n = new Decimal(e).toFixed(2)
				this.form.changeSaleNum = _n
			},
			uploadVideo(e) {
				this.videoUrl = e
			},
			changeType(index) {
				this.classIndex = index
				if (index == 1) {
					this.form.changeSaleNum = this.goodsInfo.initSaleNum
				} else {
					this.form.changeSaleNum = ''
				}
			},
			confirmReason(e) {
				this.form.afterReason = e[0].label
			},
			datatype() {
				return datatype('sys_after_sales').then(res => {
					if (res.code == 200) {
						this.list = res.data.map(item => {
							return {
								value: item.dictValue,
								label: item.dictLabel,
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			handleSubmit(e) {
				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理，直接如下即可

				let bill = []
				if (files.length > 0) {
					files.forEach(v => {
						bill.push(v.response ? v.response.data.url : v.url)
					})
				}

				if (!this.videoUrl.length) {
					this.$u.toast('请上传视频！')
					return
				}
				if (!files.length) {
					this.$u.toast('请上传图片！')
					return
				}
				if (!this.form.afterReason) {
					this.$u.toast('请选择售后原因！')
					return
				}
				if (!this.form.changeSaleNum) {
					this.$u.toast('请输入售后重量！')
					return
				}
				if (this.form.remark && this.form.remark.length < 15) {
					this.$u.toast('备注信息不得少于15个字！')
					return
				}
				this.form.afterImage = bill.join(',')
				this.loading = true
				let params = {
					shopPurOrderId: this.goodsInfo.shopPurOrderId,
					shopId: this.form.shopId,
					remark: this.form.remark,
					bos: [{
						afterType: this.classIndex,
						specName: this.goodsInfo.specName,
						platformGoodsSpecMixId: this.goodsInfo.platformGoodsSpecMixId,
						platformGoodsId: this.goodsInfo.platformGoodsId,
						image: this.goodsInfo.image,
						changeSaleNum: this.form.changeSaleNum,
						changePlatformMoney: this.changePlatformMoney,
						afterImage: this.form.afterImage,
						afterReason: this.form.afterReason,
						platformMoney: this.goodsInfo.platformMoney,
						platformPrice: this.goodsInfo.platformPrice,
						shopPurOrderDetailId: this.goodsInfo.shopPurOrderDetailId,
						afterVideo: this.videoUrl.join(',')
					}]
				}
				refundAdd(params).then(res => {
					if (res.code == 200) {
						this.$u.toast('申请成功')
						setTimeout(() => {
							// uni.navigateBack()
							uni.redirectTo({
								url: `/pages/order/refundDetail?id=${res.data}`
							})
						}, 800)
					} else {
						this.loading = false
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			}
		},
		onLoad(e) {
			this.datatype()
			this.form.shopId = e.shopId
			this.goodsInfo = JSON.parse(decodeURIComponent(e.goods))
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		position: fixed;
		height: 150rpx;
		background: #FFFFFF;
		padding: 30rpx 0;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		box-shadow: 0px 0 4rpx 1rpx rgba(0, 0, 0, 0.16);
	}

	.slot-btn {
		width: 190rpx;
		height: 190rpx;
		margin-top: 10rpx;
		background: #FFFAF7;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		border: 1rpx dashed #48A147;
		color: #48A147;
		flex-direction: column;
		background-color: #F0FFF0;
	}

	.price {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #EF2929;
	}

	.border-bottom {
		border-bottom: 1rpx dashed #E5E5E5;
	}

	.kefu {
		background-color: $app-theme;
		padding: 5rpx 20rpx;
		display: inline-block;
		border-radius: 100rpx;
	}

	.c48A147 {
		color: #48A147;
		font-weight: bold;
	}

	.contact {
		top: 0;
		position: absolute;
		width: 120rpx;
		height: 100rpx;
		opacity: 0;
	}

	.goodsInfo {
		background-color: white;
		padding: 20rpx;
		border-radius: 20rpx;
		margin: 20rpx 30rpx;

		.tip {
			margin-left: 133rpx;
			padding: 7rpx 20rpx;
			background: #F0FFF0;
			border-radius: 100rpx;
			display: inline-block;
		}
	}

	.leftOne {
		margin-left: 46rpx;
	}

	.leftTwo {
		margin-left: 192rpx;
	}

	.productActive {
		transition: all .5s;
	}

	.borCe5 {
		border-top: 1rpx solid #E5E5E5;
	}

	.remark-box {
		background-color: #E5E5E5;
		width: 450rpx;
		height: 180rpx;
		border-radius: 16rpx;
		padding: 5rpx 10rpx;
	}
</style>